<template>
    <el-form
        :model="model"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
    >
        <el-form-item label="用户名" prop="name">
            <el-input
                type="text"
                v-model="model.name"
                autocomplete="off"
                style="width: 300px"
            ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input
                show-password
                type="password"
                v-model="model.password"
                autocomplete="off"
                style="width: 300px"
            ></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
                >提交</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import moment from "moment";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
    name: "Edit",
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
            } else if (value.length < 6 || value.length >= 12) {
                callback(new Error("密码需要6-12位!"));
            } else {
                callback();
            }
        };
        var validateName = (rule, value, callback) => {
            if (value.trim() === "") {
                callback(new Error("请输入用户名!"));
            } else if (value.length <= 1) {
                callback(new Error("用户名要大于一个字符!"));
            } else {
                callback();
            }
        };
        return {
            rules: {
                password: { validator: validatePass, trigger: "blur" },
                name: { validator: validateName, trigger: "blur" },
            },
            model: {
                name: "",
                password: "",
                date: "",
            },
        };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            this.model.date = moment().format("YYYY-MM-DD");
            await this.$http
                .post("/admin/create", this.model)
                .then(() => {
                  this.$message({
                    message: "添加用户成功!",
                    type: "success",
                    onClose: true,
                  });
                  this.model = {name: "", password: "", date: ""};
                })
                .catch((err) => {
                  console.log(err);
                });
            // console.log(res);
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
};
</script>

<style scoped>
</style>